<template>
  <div class="theme">
    <div class="banner"></div>
    <div class="themeList">
      <div
        class="themeItem"
        :data-theme="theme.key"
        v-for="theme in themeList"
        :key="theme.key"
        @click="onChangeTheme(theme.key)"
      >
        <div class="colorList" :style="`backgroundImage: url(${theme.img})`">
          <div :class="['colorItem', theme.key + 'Item']" v-for="i in 5" :key="i"></div>
        </div>
        <div class="label">
          {{ theme.label }}
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import { setStorage } from '@/utils/auth'
import Footer from '@/components/Footer/index'
export default {
  name: 'theme',
  description: '',
  components: { Footer },
  data() {
    return {
      themeList: [
        {
          key: 'blue',
          label: '远山黛',
          img: require('@/assets/images/theme/blue.png'),
        },
        {
          key: 'pink',
          label: '梦幻粉',
          img: require('@/assets/images/theme/pink.png'),
        },
        {
          key: 'yellow',
          label: '满月黄',
          img: require('@/assets/images/theme/yellow.png'),
        },
        {
          key: 'green',
          label: '夏日绿',
          img: require('@/assets/images/theme/green.png'),
        },
        {
          key: 'purple',
          label: '豆蔻紫',
          img: require('@/assets/images/theme/purple.png'),
        },
      ],
    }
  },
  created() {},
  methods: {
    onChangeTheme(key) {
      this.$store.state.theme = key
      setStorage('theme', key)
    },
  },
}
</script>
<style lang="scss" scoped>
.theme {
  width: 100vw;
  height: 100%;
  position: relative;
  background-color: rgba($color: $blackColor, $alpha: 0.03);
  .banner {
    width: 100vw;
    height: 40%;
    @include background_color('mainColor');
  }
  .themeList {
    position: absolute;
    top: 20%;
    width: 100vw;
    height: 40%;
    padding: 0 5%;
    display: flex;
    justify-content: space-around;
    .themeItem {
      cursor: pointer;
      width: 18%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      display: flex;
      flex-direction: column;
      background-color: $whiteColor;
      // box-shadow: 0 2px 12px 0 rgba($color: $whiteColor, $alpha: 0.8);
      .colorList {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        background-size: 101% 100%;
        -moz-background-size: 101% 100%;
        background-repeat: no-repeat;
        position: relative;
        .colorItem {
          width: 20%;
          height: 50px;
          box-shadow: 0 2px 10px 0 rgba($color: $whiteColor, $alpha: 0.2);
        }

        .blueItem:nth-of-type(1) {
          background-color: $blueSubOne;
        }
        .blueItem:nth-of-type(2) {
          background-color: $blueSubTwo;
        }
        .blueItem:nth-of-type(3) {
          background-color: $blueMain;
        }
        .blueItem:nth-of-type(4) {
          background-color: $blueSubThree;
        }
        .blueItem:nth-of-type(5) {
          background-color: $blueSubFour;
        }

        .pinkItem:nth-of-type(1) {
          background-color: $pinkSubOne;
        }
        .pinkItem:nth-of-type(2) {
          background-color: $pinkSubTwo;
        }
        .pinkItem:nth-of-type(3) {
          background-color: $pinkMain;
        }
        .pinkItem:nth-of-type(4) {
          background-color: $pinkSubThree;
        }
        .pinkItem:nth-of-type(5) {
          background-color: $pinkSubFour;
        }

        .greenItem:nth-of-type(1) {
          background-color: $greenSubOne;
        }
        .greenItem:nth-of-type(2) {
          background-color: $greenSubTwo;
        }
        .greenItem:nth-of-type(3) {
          background-color: $greenMain;
        }
        .greenItem:nth-of-type(4) {
          background-color: $greenSubThree;
        }
        .greenItem:nth-of-type(5) {
          background-color: $greenSubFour;
        }

        .yellowItem:nth-of-type(1) {
          background-color: $yellowSubOne;
        }
        .yellowItem:nth-of-type(2) {
          background-color: $yellowSubTwo;
        }
        .yellowItem:nth-of-type(3) {
          background-color: $yellowMain;
        }
        .yellowItem:nth-of-type(4) {
          background-color: $yellowSubThree;
        }
        .yellowItem:nth-of-type(5) {
          background-color: $yellowSubFour;
        }

        .purpleItem:nth-of-type(1) {
          background-color: $purpleSubOne;
        }
        .purpleItem:nth-of-type(2) {
          background-color: $purpleSubTwo;
        }
        .purpleItem:nth-of-type(3) {
          background-color: $purpleMain;
        }
        .purpleItem:nth-of-type(4) {
          background-color: $purpleSubThree;
        }
        .purpleItem:nth-of-type(5) {
          background-color: $purpleSubFour;
        }
      }
      .label {
        flex: 1;
        color: #000000;
        @include font_size('baseFontSizeUp6');
        display: flex;
        align-items: center;
      }
    }
    .themeItem:hover {
      box-shadow: 0 5px 18px 0 rgba($color: $whiteColor, $alpha: 1);
    }
  }
}
</style>
